import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_mwm/base/base.dart';
import 'package:flutter_mwm/beans/bean.dart';
import 'package:flutter_mwm/widget/button.dart';
import 'package:flutter_mwm/widget/edit.dart';
import 'package:flutter_mwm/widget/slider.dart';
import 'package:flutter_mwm/widget/text.dart';
import 'package:flutter_mwm/widget/widget.dart';

class CityHome extends BaseWidget<CityHome> {
  final String cityName;

  CityHome({
    this.cityName = '西安',
  });

  @override
  State<StatefulWidget> createState() {
    return _StateCity();
  }
}

class _StateCity extends StateBase<CityHome> {
  TextEditingController cityController = new TextEditingController();

  List<Widget> _hotCity = List();
  List<Widget> _cityList = List();

  @override
  void initState() {
    super.initState();
    _loadHotJson();
    _loadAllJson().then((_) {
      setState(() {});
    });
  }

  Future<Null> _loadHotJson() async {
    _hotCity.clear();
    String result = await rootBundle.loadString('json/hot_city.json');
    List<CityBean> hotList = CityBean.json2List(result);
    var grid = GridView.count(
      padding: EdgeInsets.fromLTRB(8, 0, 8, 8),
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: 3,
      childAspectRatio: 3,
      crossAxisSpacing: 8,
      mainAxisSpacing: 8,
      children: List.generate(hotList.length, (index) {
        return Button(
          '${hotList[index].cityName}',
          textSize: 18,
          textColor: Colors.black45,
          background: Colors.grey[200],
          highlightBackground: Colors.grey,
          radius: 10,
          onPressed: () {},
        );
      }),
    );
    _hotCity.add(grid);
  }

  Future<Null> _loadAllJson() async {
    Map<String, List<CityBean>> map = Map();
    rootBundle.loadString('json/city.json').then((result) {
      List<CityBean> cityList = CityBean.json2List(result);
      cityList.sort((start, end) => start.cityLetter.compareTo(end.cityLetter));
      cityList.forEach((_) {
        String letter = _.cityLetter;
        String name = _.cityName;
        List<CityBean> _item = map[letter];
        if (null == _item) {
          _item = List();
        }
        if (_item.isEmpty) {
          _item.add(_);
          map.putIfAbsent(letter, () => _item);
          _cityList.add(_groupTitle(letter));
        } else {
          _item.add(_);
          map.update(letter, (_) => _item);
          _cityList.add(_groupItem('$name'));
          _cityList.add(Line(color: Colors.black38));
        }
      });
    });
  }

  _groupTitle(String data) {
    return TextView(
      data,
      textAlign: TextAlign.left,
      background: Colors.grey[200],
      textColor: Colors.black38,
      padding: EdgeInsets.all(8),
      textSize: 18,
    );
  }

  _groupItem(String name) {
    return TextView(
      name,
      textAlign: TextAlign.left,
      textColor: Colors.black,
      padding: EdgeInsets.all(8),
      textSize: 18,
      onPressed: () {
        showToast('$name');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF051728),
          centerTitle: true,
          title: Text('选择城市'),
        ),
        body: Column(
          children: <Widget>[
            _inputFilterWidget(),
            Expanded(
              child: Stack(
                children: <Widget>[
                  ListView(children: _cityView()),
                  _toolTipText(),
                  //_slideView(),
                ],
                alignment: AlignmentDirectional.topEnd,
              ),
            )
          ],
        ));
  }

  Widget _inputFilterWidget() {
    return Container(
        margin: EdgeInsets.all(8),
        child: EditText(
          controller: cityController,
          showClearIcon: true,
          hintText: '输入城市名称',
          padding: EdgeInsets.symmetric(horizontal: 8),
        ),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.green),
            borderRadius: BorderRadius.all(Radius.circular(8.0))));
  }

  List<Widget> _cityView() {
    List<Widget> cityVew = List();
    cityVew.add(TextView(
      '当前定位',
      textAlign: TextAlign.left,
      padding: EdgeInsets.symmetric(horizontal: 8),
      textColor: Colors.grey,
    ));
    cityVew.add(Row(
      children: <Widget>[
        FlatButton.icon(
          onPressed: null,
          icon: Icon(
            Icons.room,
            color: Colors.lightBlueAccent,
          ),
          label: Text(
            '西安',
            style: TextStyle(fontSize: 18, color: Colors.black),
          ),
        ),
        Expanded(child: Container()),
        ButtonText(
          '重新定位',
          padding: EdgeInsets.all(8),
          textColor: Colors.blueAccent,
          onPressed: () {
            showToast('暂未实现');
          },
        )
      ],
    ));
    cityVew.add(TextView('热门城市',
        textColor: Colors.grey,
        textAlign: TextAlign.left,
        textSize: 18,
        fontWeight: FontWeight.bold,
        padding: EdgeInsets.only(bottom: 8, left: 8)));
    cityVew.addAll(_hotCity);
    cityVew.addAll(_cityList);
    return cityVew;
  }

  Widget _toolTipText() {
    return Center(
      child: Offstage(
        child: TextView(
          'A',
          width: 80,
          height: 80,
          textSize: 25,
          fontWeight: FontWeight.bold,
          textColor: Colors.white,
          textAlign: TextAlign.center,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.all(Radius.circular(10))),
        ),
        offstage: true,
      ),
    );
  }

//---------View--------
  Widget _slideView() {
    return SliderView();
  }

  //------method-------
  void _changeCity() {}
}
